<template>
	<div>
		<el-card class="box-card">
			<div class="Serach_b">
				<el-button type="primary" @click="handleAdd">新增</el-button>
				<el-input type="input" autosize placeholder="请输入用户ID" v-model="fy.id" @keyup.enter.native="SearchData"
					style="width: 300px;margin-left: 20px;">
				</el-input>
				<el-button type="primary" icon="el-icon-search" @click="SearchData()">搜索</el-button>
			</div>
			<el-table :data="PanyBankList" border>
				<el-table-column prop="accountName" label="账户名称" />
				<el-table-column prop="bankName" label="银行名称" />
				<el-table-column prop="bankAccount" label="银行账户" />
				<el-table-column prop="createBy" label="创建人" />
				<el-table-column prop="createTime" label="创建时间" />
				<el-table-column prop="updateBy" label="修改人" />
				<el-table-column prop="updateTime" label="修改时间" />
				<el-table-column label="操作" width="160px">
					<template slot-scope="scope">
						<div class="button">
							<el-button type="primary" size="mini" @click="UpdateClick(scope.row)">修改</el-button>
							<el-button type="danger" size="mini" @click="deleteClick(scope.row)">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
				<el-form label-position="left" ref="ObjectList" :rules="rules" label-width="80px" :model="ObjectList">
					<el-form-item label="账户名称" prop="accountName">
						<el-input placeholder="请输入账户名称" v-model="ObjectList.accountName" :validate-event="false">
						</el-input>
					</el-form-item>
					<el-form-item label="银行名称" prop="bankName">
						<el-input placeholder="请输入银行名称" v-model="ObjectList.bankName"></el-input>
					</el-form-item>
					<el-form-item label="银行账户" prop="bankAccount">
						<el-input placeholder="请输入银行账户" v-model="ObjectList.bankAccount"></el-input>
					</el-form-item>
					<!-- <el-form-item label="是否为默认">
            <el-select v-model="ObjectList.isDeleted" placeholder="请选择">
              <el-option
                v-for="item in ShowList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="ClickUser('ObjectList')">确 定</el-button>
				</span>
			</el-dialog>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15]"
				:page-size="fy.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
	</div>
</template>

<script>
	import * as syBankApi from "@/api/Add";
	import * as PayLogBankApi from "@/api/Search";
	import {
		timestampToTime
	} from "@/utils/date";
	export default {
		data() {
			return {
				rules: {
					accountName: [{
						required: true,
						message: "请输入账号名称",
						trigger: "blur",
					}, ],
					bankName: [{
						required: true,
						message: "请输入银行名称",
						trigger: "blur",
					}, ],
				},
				timestampToTime,
				fy: {
					size: 10,
					current: 1,
				},
				total: 0,
				PanyBankList: [],
				title: "",
				dialogVisible: false,
				ObjectList: {},
				ShowList: [{
						label: "是",
						value: 1,
					},
					{
						label: "否",
						value: 0,
					},
				],
			};
		},
		methods: {
			dateArrayTransfer(dateArray) {
				if (dateArray == null || dateArray == '') {
					return '';
				}
				var returnDate = dateArray[0] + "-" +
					this.returnDoubleNum(dateArray[1]) + "-" +
					this.returnDoubleNum(dateArray[2]) + " " +
					this.returnDoubleNum(dateArray[3]) + ":" +
					this.returnDoubleNum(dateArray[4]) + ":" +
					this.returnDoubleNum(dateArray[5]);
				return returnDate;
			},
			returnDoubleNum(number) {
				return (Array(2).join(0) + number).slice(-2); //创建一个长度为2的数组，且默认用0填充；然后用传过来的数添加都右边，然后从右向左截取两位！
			},
			handleAdd() {
				this.ObjectList = {};
				this.dialogVisible = true;
			},
			deleteClick(row) {
				this.$confirm("确认删除？")
					.then((_) => {
						syBankApi.companyBankDelete({
							idList: row.id
						}).then((res) => {
							if (res.data == true) {
								this.dialogVisible = false;
								this.SearchData();
								this.$notify({
									title: "成功",
									message: "删除成功",
									type: "success",
								});
							} else {
								this.dialogVisible = false;
								this.SearchData();
								this.$notify({
									title: "失败",
									message: "删除失败",
									type: "error",
								});
							}
						});
						done();
					})
					.catch((_) => {});
			},
			ClickUser(ObjectList) {
				this.$refs[ObjectList].validate((valid) => {
					if (valid) {
						if (this.ObjectList.id) {
							syBankApi
								.UpdateBank({
									...this.ObjectList,
									token: this.$store.getters.token,
								})
								.then((res) => {
									if (res.data == true) {
										this.dialogVisible = false;
										this.SearchData();
										this.$notify({
											title: "成功",
											message: "修改成功",
											type: "success",
										});
									} else {
										this.dialogVisible = false;
										this.SearchData();
										this.$notify({
											title: "失败",
											message: "修改失败",
											type: "error",
										});
									}
								});
						} else {
							syBankApi
								.newCompanyBank({
									...this.ObjectList,
									token: this.$store.getters.token,
								})
								.then((res) => {
									if (res.data == true) {
										this.dialogVisible = false;
										this.SearchData();
										this.$notify({
											title: "成功",
											message: "新增成功",
											type: "success",
										});
									} else {
										this.dialogVisible = false;
										this.SearchData();
										this.$notify({
											title: "失败",
											message: "新增失败",
											type: "error",
										});
									}
								});
						}
					} else {
						return false;
					}
				});
			},
			UpdateClick(row) {
				syBankApi.UpdateBankID({
					id: row.id
				}).then((res) => {
					this.ObjectList = res.data;
					this.dialogVisible = true;
				});
				this.title = "修改对公账户信息";
			},
			SearchData() {
				PayLogBankApi.InsertOrderPayLogBank(this.fy).then((res) => {
					this.total = res.data.total;
					this.PanyBankList = res.data.records;
					this.PanyBankList.map(item => {
						item.createTime = this.dateArrayTransfer(item.createTime)
						item.updateTime = this.dateArrayTransfer(item.updateTime)
					})
				});
			},
			handleSizeChange(value) {
				this.fy.size = value;
				this.SearchData();
			},
			handleCurrentChange(value) {
				this.fy.current = value;
				this.SearchData();
			},
			handleClose(done) {
				this.$confirm("确认关闭？")
					.then((_) => {
						done();
					})
					.catch((_) => {});
			},
		},
		created() {
			this.SearchData();
		},
	};
</script>

<style lang="scss" scoped>
	.el-pagination {
		margin-top: 10px;
	}

	.box-card {
		width: 95%;
		margin: auto;
	}

	.Serach_b {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.Serach_b .el-button {
		margin-left: 20px;
	}

	.el-textarea {
		margin-left: 20px;
		width: 20%;
	}
</style>
